<template>
	<view class="message">
		<view class="head">
			<view class="button_list">
				<navigator v-for="(item,index) in btList" :key="index" :url="item.url"  hover-class="navigator-hover">
				<view class="button_item" >
					<image :src=item.pic mode=""></image>
					<view class="button_text">
						{{item.text}}
					</view>
				</view>
				</navigator>
				
			</view>
		</view>
		<view class="content">
			<view class="message_list">
				<view class="message_item" v-for="(item,index) in messagList" :key="index">
					<view class="left">
						<image :src=item.pic mode=""></image>
					</view>
					<view class="right">
						<view class="name">
							{{item.name}}
						</view>
						<view class="message">
							{{item.message}}
						</view>
					</view>
					<view class="time">
						{{item.time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				btList:[
					{
						pic:'../../static/icon/icon-21.png',
						text:'预定看房',
						url:'../addressList/content/reserveHouse'
					},
					{
						pic:'../../static/icon/icon-22.png',
						text:'看房记录',
						url:'../addressList/content/visitHouse'
					},
					{
						pic:'../../static/icon/icon-23.png',
						text:'公告',
						url:''
					}
				],
				messagList:[
					{
						pic:'../../static/icon/icon-24.png',
						name:'风尚川',
						message:'帮我联系一下嫦娥，我这边已经签了一单',
						time:'20:28'
					},
					{
						pic:'../../static/icon/icon-24.png',
						name:'风尚川',
						message:'帮我联系一下嫦娥，我这边已经签了一单',
						time:'20:28'
					}
				]
			}
		},
		onLoad() {
			this.checkLogin()
		},
		methods:{
			
		}
	}
</script>

<style>
	.head{
		position: relative;
		width: 100%;
		height: 180upx;
		background: #4F5861;
	}
	.button_list{
		position: absolute;
		left: calc(50% - 350upx);
		bottom: -100upx;
		display: flex;
		justify-content: space-around;
		width: 700upx;
		height: 200upx;
		text-align: center;
		background: white;
		border-radius: 20upx;
	}
	.button_list .button_item{
		margin-top: 30upx;
	}
	.button_list image{
		width: 96upx;
		height: 96upx;
	}
	.button_list .button_text{
		font-size: 24upx;
	}
	.content{
		overflow: hidden;
		width: 100%;
		padding-top: 120upx;
	}
	.message_list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: white;
	}
	.message_item{
		display: flex;
		justify-content: space-between;
		width: 700upx;
		height: 160upx;
		margin: 0 auto;
	}
	.message_item .left{
		width: 80upx;
		height: 80upx;
		margin-top: 40upx;
	}
	.message_item .left image{
		width: 80upx;
		height: 80upx;
	}
	.message_item .right{
		width: 500upx;
	}
	.message_item .right .name{
		margin-top: 40upx;
		font-size: 32upx;
		line-height: 34upx;
	}
	.message_item .right .message{
		margin-top: 10upx;
		color: #666667;
		font-size: 26upx;
		line-height: 36upx;
	}
	.message_item .time{
		margin-top: 40upx;
		color: #aaaaaa;
		font-size: 24upx;
		width: 80upx;
		line-height: 34upx;
	}
</style>
